<template>
	<view class="pb-safe-area">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, '--padding:0px', `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-icons" @tap="$page.back()">
				<uni-icons type="left" size="24" color="var(--xl-dark)"></uni-icons>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-content">
				<input v-model="search.keywords"
					class="flex-1 py-2 px-4 bg-dark-light-9 rounded-round h9 font-weight-600"
					placeholder-class="text-dark-light-3" type="text" placeholder="搜索服务名称" confirm-type="search"
					@input="searchList" />
			</view>
			<view class="x-navbar-icons" @tap="searchList">
				<uni-icons type="search" size="20" color="var(--xl-primary)"></uni-icons>
			</view>
			<view class="x-navbar-icons"></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-navbar-mp-weixin"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
			<view class="bg-white rounded-4 p-4 flex flex-column" v-for="(item, index) in list" :key="index">
				<view class="flex grid-gap-2 flex-center" @tap="$page.open('/pages/project/details?id='+item.id)">
					<image :src="item.thumb" class="rounded-4" lazy-load mode="scaleToFill"
						style="width: 154rpx;height: 154rpx;" />
					<view class="flex-1 flex flex-column grid-gap-2">
						<text class="font-weight-600 h9">{{ item.title }}</text>
						<view class="flex flex-column grid-gap-1 h10 text-grey">
							<view class="flex">
								<text>材料费：</text>
								<text>{{ item.material_price }}元</text>
							</view>
							<view class="flex">
								<text>服务时长：</text>
								<text>{{ item.service_duration }}分钟</text>
							</view>
							<view class="flex">
								<text>加钟：</text>
								<template v-if="item.overtime_state">
									<text v-if="item.overtime_separate">
										{{ item.overtime_price }}元/{{ item.overtime_duration }}分钟</text>
									<text v-else>跟随项目定价</text>
								</template>
								<text v-else>不可用</text>
							</view>
						</view>
					</view>
					<view class="flex flex-column grid-gap-2 flex-y-flex-end">
						<x-money type="danger-light-3" weight="bold" size="6" :money="item.price" unit="">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
						<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="8"
							:money="(item.price - item.material_price) * item.technician_commission / 100" unit="元">
							<template #prefix>
								<text class="h10 text-danger-light-3">预估收益</text>
							</template>
						</x-money>
					</view>
				</view>
				<view class="flex flex-x-flex-end">
					<button class="btn-danger btn-round mx-0" size="mini" @tap="toggleState(item)" v-if="item.state">下架</button>
					<button class="btn-primary btn-round mx-0" size="mini" @tap="toggleState(item)" v-else>上架</button>
				</view>
			</view>
			<x-more :status="loading" @load="getList" />
		</view>
		<view v-else class="flex flex-center vh-50">
			<x-empty type="order" text="暂无服务"></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { $func, $api, $message, $page } from '@/utils';
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { usePlatformStore, useRefs } from "@/stores";
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const opacity = ref<{
	navbar: number | string
}>({
	navbar: 0,
});
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val < -10) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
})
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
const loading = ref('loadmore');
const list = ref([]);
const search = ref({
	page: 1,
	keywords: ''
});
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.TechnicianService.service(search.value).then(data => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			loading.value = 'nomore';
		}
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	});
}
const debounceGetList = $func.debounce(getList, 300);
const searchList = () => {
	search.value.page = 1;
	list.value = [];
	loading.value = 'loadmore';
	debounceGetList();
}
const toggleState = (item) => {
	$api.TechnicianService.updateState(item.uts_id).then((res) => {
		item.state = res.data.state;
	}).catch((err) => {
		$message.error(err.msg);
	});
}
onLoad(() => {
	getList()
})
onReachBottom(() => {
	getList()
})
</script>
